<!doctype html>
<html>
<head>
<title>Alchemist, the game</title>
<meta charset="utf-8" />
<meta generator="csscreator.com" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min-widgets.js"></script>
<link rel="stylesheet" href="css/workspace.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css" />
</head>
<body>
  <div id="pagewidth">
    <div id="header">
    	<img src="/img/logo.png" id="logo" />
    	<div id="userInfo">
    		<br/>
	    	Welcome, <span id="user"></span><br/>
            <br/>
	    	Discovered: <span id="discovered"></span> of <span id="total"></span>
    	</div>
    </div>
    <div id="wrapper" class="clearfix">
      <div id="leftcol" title="Double click an element to add">
        <div id="filter"><input name="filterBox" type="text" id="filterBox"/></div>
        <div id="palette" title="Double click an element to add">
          <div id="loader"><img src="/img/loading.gif"/></div>
        </div>
      </div>
      <div id="mainColWrapper" class="clearfix">
	      <div id="menu">
		      <img id="help" src="img/help.png" alt="Help" title="Help">
		      <img id="clean" src="img/clean.png" alt="Clean" title="Clean workspace">
		      <img id="rearrange" src="img/arrange.png" alt="Rearrange" title="Rearrange current elements on workspace">
	      </div>
	      <div id="maincol">
	        <div id="bin" class="ui-droppable"><br/><img src="img/trash.png" alt="Trashcan" title="Throw disposable elements here"><br/><br/></div>
	      </div>
      </div>
    </div>
  </div>
	<div id="helpDiv" title="Basic dialog">
		<p> The game's objective is to discover all the possible combinations between elements. </p>
		<ul>
			<li>Double-click an element on the left panel to add it to the workspace</li>
			<li>Drag an element over another to combine them</li>
			<li>Double-click an element on the workspace to remove it, or drag it to the trashcan</li>
			<li>Filter elements by using the input box on top of the left panel</li>
			<li>Double-click the workspace in order add the four basic elements to the workspace</li>
			<li>Elements with the name in red are final and can't be combined</li>
		</ul>
	</div>
  <script type="text/javascript" src="js/main.js"></script>
  <script type="text/javascript" src="js/ga.js"></script>
</body>
</html>